<template>
  <div>
    <el-form ref="form" :model="roleForm" inline>
      <el-form-item>
        <el-input v-model="roleForm.roleName" placeholder="角色名"></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="search"
        >查詢</el-button
      >
      <el-button @click="clear">清空</el-button>
    </el-form>
    <el-button type="primary" @click="add">添加</el-button>
    <el-button type="danger" @click="removeAll" :disabled="!selectIds.length"
      >批量删除</el-button
    >

    <el-table
      :data="roleInfo.items"
      border
      v-loading="roleListLoading"
      stripe
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" align="center" label="序号" width="80px">
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="width">
        <template slot-scope="{ row }">
          <div v-if="row.isShowInput">
            <el-input
              style="width: 400px; margin-right: 10px"
              size="mini"
              v-model="row.roleName"
              placeholder="请输入角色名"
            ></el-input>
            <el-button
              @click="cancleEdit(row)"
              type="warning"
              icon="el-icon-refresh"
              size="mini"
              >取消</el-button
            >
          </div>
          <pre v-else>{{ row.roleName }}</pre>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="width">
        <template slot-scope="{ row }">
          <el-button
            @click="goRoleAuth(row)"
            type="primary"
            icon="el-icon-info"
            size="mini"
          ></el-button>
          <el-button
            v-if="!row.isShowInput"
            @click="edit(row)"
            type="warning"
            icon="el-icon-edit"
            size="mini"
          ></el-button>
          <el-button
            v-else
            @click="check(row)"
            type="primary"
            icon="el-icon-check"
            size="mini"
          ></el-button>

          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @onConfirm="confirm(row)"
          >
            <el-button
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              size="mini"
              style="margin: 0 10px"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- pagination -->
    <el-pagination
      background
      style="text-align: center"
      prev-text="上一页"
      next-text="下一页"
      @size-change="handleSizeChange"
      @current-change="getRoleInfo"
      :current-page="page"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      layout="prev, pager, next, jumper,->,total, sizes"
      :total="roleInfo.total"
    >
    </el-pagination>

    <!-- dialog -->
    <el-dialog title="添加角色" :visible.sync="dialogRoleVisible">
      <el-form :model="role" :rules="roleRules" ref="role">
        <el-form-item label="请输入角色名称" prop="roleName">
          <el-input v-model="role.roleName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRoleVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectIds: [],
      roleForm: {
        roleName: "",
      },

      realRoleForm: {
        roleName: "",
      },
      page: 1,
      limit: 5,
      roleInfo: {},
      roleListLoading: false,
      dialogRoleVisible: false,
      role: {
        roleName: "",
      },
      roleRules: {
        roleName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getRoleInfo();
  },
  methods: {
    handleSelectionChange(ids) {
      this.selectIds = ids.map((item) => item.id);
    },
    async confirm(row) {
      await this.$http.role.reqRemove(row.id);
      this.$message.success("删除成功");
      this.getRoleInfo(
        this.roleInfo.items.length == 1 ? this.page - 1 : this.page
      );
    },
    async removeAll() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async() => {
          await this.$http.role.reqRemoveSelect(this.selectIds);
          this.$message.success("删除成功");
          this.getRoleInfo();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(222);
    },
    goRoleAuth(row) {
      this.$router.push({
        name: "RoleAuth",
        params: {
          id: row.id,
        },
        query: {
          roleName: row.roleName,
        },
      });
    },
    async check(row) {
      await this.$http.role.reqSaveRole(row);
      this.$message.success("编辑成功");
      this.getRoleInfo(this.page);
    },
    //编辑按钮的回调
    edit(row) {
      row.isShowInput = true;
    },
    cancleEdit(row) {
      row.roleName = row.originRoleName;
      row.isShowInput = false;
      this.$message.warning("取消角色修改");
    },
    //查询按钮的回调
    search() {
      this.realRoleForm = { ...this.roleForm };
      this.getRoleInfo();
    },
    //清空的回调
    clear() {
      this.realRoleForm = {};
      this.roleForm = {};
      this, this.getRoleInfo();
    },
    //获取角色信息
    async getRoleInfo(p = 1) {
      this.page = p;
      let { limit } = this;
      let { roleName } = this.realRoleForm;
      this.roleListLoading = true;
      let res = await this.$http.role.reqRoleInfo(p, limit, roleName);
      this.roleListLoading = false;
      res.data.items = res.data.items.map((item) => ({
        ...item,
        isShowInput: false,
        originRoleName: item.roleName,
      }));
      this.roleInfo = res.data;
    },

    // 每页数量改变的回调
    handleSizeChange(limit) {
      this.limit = limit;
      this.getRoleInfo();
    },

    add() {
      this.dialogRoleVisible = true;

      this.$nextTick(() => {
        this.$refs.role.resetFields();
        this.role = {};
      });
    },
    async addRole() {
      let { role } = this;
      await this.$http.role.reqSaveRole(role);
      this.$message({
        type: "success",
        message: "添加成功",
      });
      this.dialogRoleVisible = false;
      this.getRoleInfo();
    },
  },
};
</script>

<style>
</style>